```svelte
<script lang="ts">
  import * as rating from "@zag-js/rating-group"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(rating.machine, {
    id,
    defaultValue: 2.5,
  })
  const api = $derived(rating.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <label {...api.getLabelProps()}>Rate:</label>
  <div {...api.getControlProps()}>
    {#each api.items as index}
      {@const snapshot = api.getItemState({ index })}
      <span {...api.getItemProps({ index })}>
        {#if snapshot.half}
          {@render HalfStar()}
        {:else}
          {@render Star()}
        {/if}
      </span>
    {/each}
  </div>
  <input {...api.getHiddenInputProps()} data-testid="hidden-input" />
</div>
```
